<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form
        :model="where"
        label-width="77px"
        class="ele-form-search"
        @keyup.enter.native="reload"
        @submit.native.prevent>

        <el-row :gutter="15">
        <el-col :lg="6" :md="12">
        	<el-form-item label="年级:">
        		<el-select
        			filterable
        			clearable
        			v-model="where.gradeId"
        			size="small"
        			@change="$forceUpdate();getClassList()"
        			placeholder="-请选择年级-"
        			class="ele-fluid">
        			<el-option v-for="item in gradeList" :key="item.id" :label="item.name" :value="item.id"/>
        		</el-select>
        	</el-form-item>
        </el-col>
        <el-col :lg="6" :md="12">
        	<el-form-item label="班级:">
        		<el-select
        			filterable
        			clearable
        			v-model="where.classId"
        			size="small"
        			placeholder="-请选择班级-"
        			class="ele-fluid">
        			<el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item.id"/>
        		</el-select>
        	</el-form-item>
        </el-col>
        <el-col :lg="6" :md="12">
        	<el-form-item label="项目:">
        		<el-select
        			filterable
        			clearable
        			v-model="where.projectId"
        			size="small"
        			placeholder="-请选择项目-">
        			<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"/>
        		</el-select>
        	</el-form-item>
        </el-col>
        <el-col :lg="6" :md="12">
        	<el-form-item label="性别:">
        		<el-select
        			clearable
        			v-model="where.gender"
        			placeholder="请选择性别"
        			class="selects">
        			<el-option label="男" value="1"/>
        			<el-option label="女" value="2"/>
        			<el-option label="未知" value="3"/>
        		</el-select>
        	</el-form-item>
        </el-col>
        </el-row>

        <el-row :gutter="15">
        <el-col :lg="6" :md="12">
        	<el-form-item label="关键字:">
        		<el-input
        			clearable
        			v-model="where.keywords"
        			placeholder="请输入姓名或学籍号"/>
        	</el-form-item>
        </el-col>
        <el-col :lg="7" :md="12">
        	<el-form-item label="运动时间:">
        		<el-date-picker
        			:editable="false"
        			v-model="where.start_end"
        			type="daterange"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
        			range-separator="至"
        			start-placeholder="开始日期"
        			end-placeholder="结束日期">
        		</el-date-picker>
        	</el-form-item>
        </el-col>


        </el-row>
        <el-row :gutter="15">
          <el-col :lg="7" :md="12">
          	<el-form-item label="删除时间:">
          		<el-date-picker
          			:editable="false"
          			v-model="where.start_end2"
          			type="daterange"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
          			range-separator="至"
          			start-placeholder="开始日期"
          			end-placeholder="结束日期">
          		</el-date-picker>
          	</el-form-item>
          </el-col>
          </el-row>
        <el-row :gutter="15">
        <el-col :lg="6" :md="12">
          <div class="ele-form-actions">
            <el-button
              type="primary"
              icon="el-icon-search"
              class="ele-btn-icon"
              @click="reload">查询
            </el-button>
            <el-button @click="reset">重置</el-button>
          <!--  <el-button
              size="small"
              type="success"
              icon="el-icon-download"
              class="ele-btn-icon"
              @click="exportExcel">导出
            </el-button> -->
          </div>
        </el-col>
      </el-row>


      </el-form>

      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :where="where"
        :datasource="url"
        :columns="columns"
        :selection.sync="selection"
        height="calc(100vh - 315px)">
       <template slot="toolbar">
            <el-button
              @click="exportExcel"
              type="primary"
              icon="el-icon-download"
              class="ele-btn-icon"
              size="small">导出
            </el-button>
          </template> -->
          <template slot="toolbar">
          	<el-button
          		@click="recoverBatch"
          		type="primary"
          		size="small">批量恢复
          	</el-button>
          </template>
          <!-- 操作列 -->
          <template slot="action" slot-scope="{row}">
            <el-link
              type="primary"
              size="small"
              @click="recoverOne(row)">恢复
            </el-link>
            </template>
      </ele-pro-table>
    </el-card>

  </div>


</template>

<script>
import {mapGetters} from "vuex";
import {download} from "@/utils/download";
import XLSX from 'xlsx';

export default {
  name: 'Delrecord',
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      // 表格数据接口
      url: '/sport/delrecover',
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: "left"
        },
        {
          prop: 'tbid',
          label: '记录id',
          width: 80,
          align: 'center',
          showOverflowTooltip: true,
          fixed: "left"
        },
        {
          prop: 'projectName',
          label: '项目',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110,
        },
        {
          prop: 'testerName',
          label: '姓名',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
        },
        {
          prop: 'testerNumber',
          label: '学籍号',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'score',
          label: '运动成绩',
          sortable: 'custom',
          align: 'center',
          width: 150,
          resizable: false,
        },
        {
          prop: 'duration',
          label: '运动耗时',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
        },
        {
          prop: 'bmi',
          label: 'BMI',
          showOverflowTooltip: true,
          minWidth: 120,
          align: 'center',
        },
        {
          prop: 'pingscore',
          label: '评分',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
        },
        {
          prop: 'ratingStr',
          label: '等级',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
        },
        {
          prop: 'gender',
          label: '性别',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 60,
          slot: 'gender'
        },
        {
          prop: 'grade',
          label: '年级',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
        },
        {
          prop: 'departName',
          label: '院系名称',
          align: 'center',
          width: 80,
          resizable: false,
        },
        {
          prop: 'professionalName',
          label: '专业',
          align: 'center',
          width: 80,
          resizable: false,
        },
        {
          prop: 'clazz',
          label: '专业班级',
          align: 'center',
          width: 80,
          resizable: false,
        },
        {
          prop: 'createdDate',
          label: '运动时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 160,
        },
        {
          prop: 'deletetime',
          label: '删除时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
        },
        {
          prop: 'deleteuser',
          label: '操作人',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100,
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 150,
          align: 'center',
          resizable: false,
          slot: 'action',
          fixed: "right"
        }
      ],
      // 表格搜索条件
      where: {},
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 学年列表
      annualList: [],
      // 项目列表
      projectList: [],
      // 年级列表
      gradeList: [],
      // 院系列表
      departmentsList: [],
      // 专业列表
      professionalList: [],
      // 班级列表
      classList: [],
      // 任务列表
      taskList: [],
    };
  },
  mounted() {
  	// 学年列表
  	this.getAnnualList();
  	// 获取项目列表
  	this.getProjectList();
  	// 获取年级列表
  	this.getGradeList();
  	// 获取院系列表
  	this.getDepartmentsList();
  	// 获取专业列表
  	this.getProfessionalList();
  	// 获取班级列表
  	this.getClassList();
  	// 获取任务列表
  	this.getTaskList();
  },
  methods: {
      // 取消预览
      handleCancel(e) {
        this.viewVideo = false;
        this.$refs.vueRef.pause();//暂停
      },

    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({where: this.where});
    },
    /* 重置搜索 */
    reset() {
      this.where = {};
      this.reload();
    },
    /* 恢复 */
    recoverOne(row) {
      this.$confirm('确定要恢复吗?', '提示', {
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({lock: true});
        this.$http.post('/sport/recover', {id: row.tbid}).then(res => {
          loading.close();
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          loading.close();
          this.$message.error(e.message);
        });
      }).catch(() => {
      });
    },
    /**
     * 获取学年列表
     */
    getAnnualList() {
    	this.$http.post('/annual/getAnnualList').then(res => {
    		if (res.data.code === 0) {
    			this.annualList = res.data.data;
    		} else {
    			this.$message.error(res.data.msg);
    		}
    	}).catch(e => {
    		this.$message.error(e.message);
    	});
    },
    /**
     * 获取项目列表
     */
    getProjectList() {
    	this.$http.post('/project/getProjectsList').then(res => {
    		if (res.data.code === 0) {
    			this.projectList = res.data.data;
    		} else {
    			this.$message.error(res.data.msg);
    		}
    	}).catch(e => {
    		this.$message.error(e.message);
    	});
    },
    /**
     * 获取年级列表
     */
    getGradeList() {
    	this.$http.post('/grade/getGradesList').then(res => {
    		if (res.data.code === 0) {
    			this.gradeList = res.data.data;
    		} else {
    			this.$message.error(res.data.msg);
    		}
    	}).catch(e => {
    		this.$message.error(e.message);
    	});
    },
    /**
     * 获取院系列表
     */
    getDepartmentsList() {
    	if(this.where.yxtype){
    		delete this.where.departmentsId
    		delete this.where.professionalId
    		delete this.where.classId
    		// this.where.departmentsId = '';
    		// this.where.professionalId = '';
    		// this.where.classId = '';
    		// this.$forceUpdate();
    	}
    	this.$http.post('/departments/getDepartmentsList', {type: this.where.yxtype}).then(res => {
    		if (res.data.code === 0) {
    			this.departmentsList = res.data.data;
    		} else {
    			this.$message.error(res.data.msg);
    		}
    	}).catch(e => {
    		this.$message.error(e.message);
    	});

    	this.getProfessionalList();
    	this.getClassList();
    },
    /**
     * 获取专业列表
     */
    getProfessionalList() {
    	this.$http.post('/professional/getProfessionalsList',{type: this.where.yxtype,superior:this.where.departmentsId}).then(res => {
    		if (res.data.code === 0) {
    			this.professionalList = res.data.data;
    		} else {
    			this.$message.error(res.data.msg);
    		}
    	}).catch(e => {
    		this.$message.error(e.message);
    	});
    },
    /**
     * 获取班级列表
     */
    getClassList() {
    	this.$http.post('/clss/getClassList',{yid:this.where.departmentsId,gid:this.where.gradeId,pid:this.where.professionalId,stype:this.where.yxtype}).then(res => {
    		if (res.data.code === 0) {
    			this.classList = res.data.data;
    		} else {
    			this.$message.error(res.data.msg);
    		}
    	}).catch(e => {
    		this.$message.error(e.message);
    	});
    },
    /**
     * 获取任务列表
     */
    getTaskList() {
    	this.$http.post('/task/getTaskList').then(res => {
    		if (res.data.code === 0) {
    			this.taskList = res.data.data;
    		} else {
    			this.$message.error(res.data.msg);
    		}
    	}).catch(e => {
    		this.$message.error(e.message);
    	});
    },
    /* 批量恢复 */
    recoverBatch() {
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据')
        return;
      }
      this.$confirm('确定要恢复选中的记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({lock: true});
        this.$http.post('/sport/recover', {id: this.selection.map(d => d.id)}).then(res => {
          loading.close();
          if (res.data.code === 0) {
            this.$message({type: 'success', message: res.data.msg});
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          loading.close();
          this.$message.error(e.message);
        });
      }).catch(() => {
      });
    },
    /* 导出数据Excel */
    exportExcel() {
      download('/sport/exportExcelrecover', Object.assign({type: 4},this.where))
      // let info = Object.assign({},this.where);
      // console.log(info)
      // const loading = this.$loading({lock: true});
      // this.$http
      //   .post("/sport/exportExcel?type=4", info)
      //   .then((res) => {
      //     loading.close();
      //     let data = res.data;
      //     if (data.code == 0) {
      //       // 下载文件
      //       window.location.href = data.data;
      //       this.$message({
      //         type: "success",
      //         message: "导出成功",
      //       });
      //     } else {
      //       this.$message.error("导出失败");
      //     }
      //   })
    },
  }
}
</script>

<style scoped>
</style>

<style>

  span.el-link--inner {
      background: #A4ADB3;
      color: white;
      font-size: 12px;
      padding: 2px 4px;
      border-radius: 5px;
  }
  .videoshow {
      position: fixed;
      left: 20%;
      top: 20%;
      width: 850px;
      background: #f3f2f2;
  }
  video{
    padding:10px 5px 5px;
    padding-top: 30px;
    width:800px;
  }
  .videoclose{
      position: absolute;
      float: right;
      border-radius: 37px;
      display: block;
      margin-left: 780px;
      margin-top: 3px;
      background: #e6dddd;
      padding: 2px 4px;
  }
  </style>
